<!-- 商家公告 -->
<template>
	<view class="notice" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
		<!--  -->
		<refresh :freshFlag="freshFlag" :loadMsg="loadMsg"></refresh>
		<view class="notice_card pr" v-for="(item,index) in notice" :key="item.id" @click.stop="jump(index)">
			<view class="card_middle" >
				<view class="middle_name one-t">{{item.title}}</view>
				<view class="middle_place" v-html="item.value"></view>
				<view class="middle_address one-t">{{item.release_time}}</view>
			</view>
		</view>
		<view class="getMore" style="padding: 50rpx 0;" v-if="notice.length > 10">
			<touch-bottom :isNone="isNone" :isLoad="isLoad" :isName="isName"></touch-bottom>
		</view>
		<empty :null_data="null_data" v-if="!notice.length"></empty>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				isName: false,
				isLoad: false,
				isNone: false,
				//空状态
				null_data: {
					null_img: this.imgUrl + 'nocollect.png',
					text: '暂无公告~'
				},
				current: 0,
				notice: [],
				count: 10,
				page: 1,
				// 下拉刷新
				startY: 0, // 保存 y轴点的位置
				loadShowHeight: 0,
				scrollTop: 0,
				loadMinHeight: 0,
				loadMsg: '',
				freshFlag: false,
				url: '/pages/news/detail/index'
			};
		},
		onLoad() {
			this.getNotice();
			// 消息订阅
			// this.getWxSub();
		},
		onReachBottom() {
			setTimeout(() => {
				this.getMore()
			}, 2000)
		},
		methods: {
			jump(index) {
				console.log( index, 'index');
				this.$api('newDetail',{notice_id: this.notice[index].id}).then(res=> {
					console.log(res.data,'res')
					res.data.release_time = this.$tools.time_data(res.data.release_time,'z_date')
					this.$store.dispatch('init/get_NewDetail',res.data)
				})
				this.$Router.push({
					path: this.url,
				})
			},
			// 下拉菜单
			touchStart(e) {
				this.startY = e.touches[0].pageY;
			},
			touchMove(e) {
				if (this.scrollTop == 0) {
					let moveDistance = e.touches[0].pageY - this.startY;
					if (moveDistance > 0 && moveDistance <= (this.loadMaxHeight || 30)) {
						this.loadShowHeight = moveDistance;
					};
				};
			},
			touchEnd(e) {
				if (this.loadShowHeight >= (this.loadMinHeight || 20)) {
					this.refresh();
				} else {
					this.loadShowHeight = 0;
				}
			},
			refresh() {
				this.freshFlag = true;
				this.loadMsg = '刷新中...';
				setTimeout(() => {
					this.getMore();
					this.loadMsg = '刷新完成';
					this.loadShowHeight = 0;
					setTimeout(()=> {
						this.freshFlag = false;
					},500)
				}, 1500);
			},
			// 加载更多
			getMore() {
				if (this.isName) return;
				this.isNone = true;
				this.isLoad = true;
				setTimeout(() => {
					this.page++
					this.$api('notice', {
						"page": this.page,
						"pagesize": this.count
					}).then(res => {
						this.notice = [...this.notice, ...res.data.data]
						if (!res.data.data.length) {
							this.isLoad = false;
							this.isName = true
						} else {
							this.isLoad = false;
							this.isNone = false;
						}
					})
				}, 1000)
			},
			getNotice() {
				// 公告
				this.$api('notice', {
					"page": this.page,
					"pagesize": this.count
				}).then(res => {
					this.notice = res.data.data
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	@import './index.scss';
</style>
